import React, { Component } from 'react'
// import moment from 'moment'
import { 
    DatePicker,
    Divider,
    Row,
    Col,
    Input, 
    
} from 'antd';
import CateSelect from '../../components/Cates/CateSelect'
const { RangePicker } = DatePicker;
export default class Find extends Component {
    constructor(props) {
        super(props)
        this.state = {
          cate:'全部',
          
        }
    }
    //品类筛选
    abcChange(val){
      this.setState({
        cate:val
        //调接口筛选
      })
    }
    //根据日期进行筛选
    deteFilter(dates){
      console.log('dates',dates)
      console.log(dates[0].format('YYYY-MM-DD'))//转成字符串
      console.log(dates[1].valueOf())//转成毫秒
      //做一些时间格式的处理工作
      //然后调接口进行筛选

      // let startTime = dates[0].format('YYYY-MM-DD')
      // let endTime = dates[1].format('YYYY-MM-DD')
    }

    
  render() {
    
    return (
      <div>
        <Divider orientation="left">商品列表</Divider>
        <div>
          <Row align='middle '>
            <Col span={1}>
                <span>名称搜索:</span>
            </Col>
            <Col span={4}>
                <Input allowClear={true}/>
            </Col>
            <Col span={1}>
                <span>品类筛选:</span>
            </Col>
            <Col span={4}>
                <CateSelect
                value={this.state.cate}
                onChange={this.abcChange.bind(this)}
                ></CateSelect>
            </Col>
          </Row>

          <Row align='middle' style={{marginTop:'20px'}}>
            <Col span={1}>日期选择:
            </Col>
            <Col span={8}>
            <RangePicker 
            onChange={this.deteFilter.bind(this)}
            format='YYYY-MM-DD HH:mm:ss'
            showTime
            ></RangePicker>
            </Col>
          </Row>
          
         
        </div>
      </div>
        )
    }
}